<template>
  <div style="margin: auto;margin-top: -55px">
    <div style="height: 45px;background-color: #02A774;margin-top: 0px">
      <font color="#f0f8ff" size="5px" style="margin: 0 auto;">我的</font>
    </div>
    <div style="height: 2px">
    </div>
    <div style="height: 80px;background-color: #02A774;margin-top: 0px">
      <div style="height: 80px;float: left;margin-left: 20px;margin-top: 15px">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block" v-for="size in sizeList" :key="size">
                <el-avatar :size="size" :src="circleUrl"></el-avatar>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="float:left;height: 80px;margin-left: 10px;margin-top: 20px">
        <div v-if="showName" style="float:right">
          <router-link to="/myregister" style="margin-top: 15px">注册</router-link>|
          <router-link to="/mylogin">登录</router-link>
        </div>
        <div v-else style="float:right;margin-right:10px;margin-top:5px">
          <font color="red">欢迎你:{{tok}}</font>
        </div>
      </div>
    </div>
    <div style="height: 80px">
      <div style="height: 80px;width: 33%;float: left;margin-left: -140px;border: 1px solid #B3C0D1">
        <div style="margin-top: 10px">
          <font color="red" size="5px">0.00</font>元<br>
          我的余额
        </div>
      </div>
      <div style="height: 80px;width: 32%;float: left;border: 1px solid #B3C0D1">
        <div style="margin-top: 10px">
          <font color="red" size="5px">0</font>个<br>
          我的优惠
        </div>
      </div>
      <div style="height: 80px;width: 32%;float: left;border: 1px solid #B3C0D1">
        <div style="margin-top: 10px">
          <font color="red" size="5px">0</font>分<br>
          我的积分
        </div>
      </div>
    </div>
    <div style="height: 10px">

    </div>
    <div style="height: 50px ;border: 1px solid #B3C0D1">
      <div style="height: 50px;float: left;margin-left: 15px;margin-top: 10px">
        <i class="el-icon-s-order"></i>
        我的订单
      </div>
    </div>
    <div style="height: 50px ;border: 1px solid #B3C0D1">
      <div style="height: 50px;float: left;margin-left: -85px;margin-top: 10px">
        <i class="el-icon-s-order"></i>
        我的收藏
      </div>
    </div>
    <div style="height: 70px;background-color: #f9fafc"  class="fixed">
      <div style="float: left;width: 33%" @click="myIndex()">
        <div>
          <el-button type="primary" icon="el-icon-s-home" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          外卖
        </div>
      </div>
      <!--<div style="float: left;width: 25%" @click="mySolr()">
        <div>
          <el-button  type="primary" icon="el-icon-search" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          搜索
        </div>
      </div>-->
      <div style="float: left;width: 33%" @click="myOrder()">
        <div>
          <el-button  type="primary" icon="el-icon-s-order" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          订单
        </div>
      </div>
      <div style="float: left;width: 25%">
        <div>
          <el-button  type="primary" icon="el-icon-s-custom" style="background-color: #f9fafc;color: #66B1FF"></el-button>
        </div>
        <div>
          我的
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tok: '',
        showName :false,
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        sizeList: ["large"]
      }
    },
    methods: {
      myIndex(){
        this.$router.push({name: "index"});
      },
      mySolr(){
        this.$router.push({name: "solr"});
      },
      myOrder(){
        this.$router.push({name: "order"});
      }
    },
    mounted() {
      this.selAllMerchant();
      this.tok = this.$session.get("u_name");
      if(this.tok==undefined){
        this.showName = true;
      }
    }
  }
</script>

<style scoped>
  /*将div固定底部  css*/
  .fixed{ position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:#000;
    z-index:9999;
  }
</style>
